import React, { useEffect, useState } from "react"
import { Button, Modal } from 'antd';
import PopTable from "./PopTable";
import AMapLoader from '@amap/amap-jsapi-loader';
import {RollbackOutlined } from '@ant-design/icons';
import PopRightLine from "./PopRightLine";
let mockData = [
  {
      name:'零公里',
      area:'零公里至龙洞养生园路段',
      path:[
          [
              103.29203999999999,
              29.580076
          ],
          [
              103.29193299999997,
              29.580125
          ],
          [
              103.29186800000002,
              29.580141
          ],
          [
              103.29177199999998,
              29.580178
          ],
          [
              103.29167000000001,
              29.580216
          ],
          [
              103.29167000000001,
              29.580216
          ],
          [
              103.291471,
              29.580001
          ],
          [
              103.290951,
              29.579465
          ],
          [
              103.29076299999997,
              29.579272
          ],
          [
              103.29070999999999,
              29.579196
          ],
          [
              103.290661,
              29.579089
          ],
          [
              103.29065100000003,
              29.57902
          ],
          [
              103.29057599999999,
              29.57866
          ],
          [
              103.29041999999998,
              29.578258
          ],
          [
              103.29027000000002,
              29.577941
          ],
          [
              103.290211,
              29.577855
          ],
          [
              103.29012,
              29.577753
          ],
          [
              103.289605,
              29.577308
          ],
          [
              103.28908999999999,
              29.576852
          ],
          [
              103.288972,
              29.576734
          ],
          [
              103.28873599999997,
              29.576375
          ],
          [
              103.28836000000001,
              29.575833
          ],
          [
              103.28822100000002,
              29.575694
          ],
          [
              103.28807599999999,
              29.57557
          ],
          [
              103.28790400000003,
              29.575452
          ],
          [
              103.287486,
              29.575195
          ],
          [
              103.28670799999998,
              29.574706
          ],
          [
              103.28653099999997,
              29.574578
          ],
          [
              103.28643999999997,
              29.574492
          ],
          [
              103.286,
              29.573982
          ],
          [
              103.28586000000001,
              29.573854
          ],
          [
              103.28558099999998,
              29.57365
          ],
          [
              103.28462100000002,
              29.57299
          ],
          [
              103.28440699999999,
              29.572856
          ],
          [
              103.284246,
              29.57277
          ],
          [
              103.28402,
              29.572684
          ],
          [
              103.28351099999998,
              29.572518
          ],
          [
              103.28255100000001,
              29.572276
          ],
          [
              103.28239000000002,
              29.572201
          ],
          [
              103.28219100000001,
              29.572089
          ],
          [
              103.28175099999999,
              29.571815
          ],
          [
              103.28151500000001,
              29.571703
          ],
          [
              103.28126299999997,
              29.57166
          ],
          [
              103.28115600000001,
              29.57166
          ],
          [
              103.28100599999999,
              29.571686
          ],
          [
              103.28082899999998,
              29.57174
          ],
          [
              103.28048000000001,
              29.57189
          ],
          [
              103.28026499999999,
              29.571971
          ],
          [
              103.28017399999999,
              29.571987
          ],
          [
              103.28002400000003,
              29.571955
          ],
          [
              103.27950399999997,
              29.571595
          ],
          [
              103.27935300000001,
              29.571472
          ],
          [
              103.27921900000001,
              29.571338
          ],
          [
              103.27912300000003,
              29.571214
          ],
          [
              103.27887599999997,
              29.570817
          ],
          [
              103.27838199999997,
              29.569857
          ],
          [
              103.27833399999997,
              29.569782
          ],
          [
              103.27812499999999,
              29.569589
          ],
          [
              103.27758299999999,
              29.569149
          ],
          [
              103.27749699999998,
              29.569047
          ],
          [
              103.277422,
              29.568929
          ],
          [
              103.277154,
              29.56842
          ],
          [
              103.27704699999998,
              29.568285
          ],
          [
              103.27696600000002,
              29.568237
          ],
          [
              103.27688599999999,
              29.568205
          ],
          [
              103.276768,
              29.568178
          ],
          [
              103.27626299999997,
              29.568087
          ],
          [
              103.27608099999998,
              29.568076
          ],
          [
              103.27594699999997,
              29.568076
          ],
          [
              103.27562999999998,
              29.56814
          ],
          [
              103.27545299999997,
              29.568146
          ],
          [
              103.27526,
              29.568076
          ],
          [
              103.27475099999998,
              29.567717
          ],
          [
              103.27464299999997,
              29.567658
          ],
          [
              103.27453100000002,
              29.567615
          ],
          [
              103.27441799999997,
              29.567593
          ],
          [
              103.274048,
              29.56754
          ],
          [
              103.27388200000001,
              29.567481
          ],
          [
              103.273731,
              29.567352
          ],
          [
              103.27348799999999,
              29.567046
          ]
      ]
  },
  {
      name:'峨洪路',
      area:'燕子休闲庄至风林月山庄',
      path:[
          [
              103.33972599999998,
              29.600729
          ],
          [
              103.33989099999997,
              29.600408
          ],
          [
              103.339945,
              29.600214
          ],
          [
              103.339945,
              29.60015
          ],
          [
              103.339923,
              29.600037
          ],
          [
              103.33989099999997,
              29.599984
          ],
          [
              103.33973500000002,
              29.599812
          ],
          [
              103.33966599999997,
              29.599689
          ],
          [
              103.33963299999999,
              29.599496
          ],
          [
              103.33965,
              29.599216
          ],
          [
              103.33969200000001,
              29.598938
          ],
          [
              103.33971400000001,
              29.598868
          ],
          [
              103.33979399999998,
              29.598755
          ],
          [
              103.339966,
              29.598594
          ],
          [
              103.34015399999998,
              29.598428
          ],
          [
              103.34032000000002,
              29.598321
          ],
          [
              103.34054500000002,
              29.598197
          ],
          [
              103.34068000000002,
              29.598149
          ],
          [
              103.34089899999998,
              29.598111
          ],
          [
              103.341613,
              29.598074
          ],
          [
              103.34194500000001,
              29.598079
          ],
          [
              103.34238499999998,
              29.598095
          ],
          [
              103.34256199999999,
              29.598122
          ],
          [
              103.342739,
              29.598171
          ],
          [
              103.342873,
              29.598224
          ],
          [
              103.34320600000001,
              29.598433
          ],
          [
              103.34329200000002,
              29.598508
          ],
          [
              103.34371599999997,
              29.59904
          ],
          [
              103.34381200000001,
              29.599136
          ],
          [
              103.34396200000003,
              29.599206
          ],
          [
              103.34410700000001,
              29.599222
          ],
          [
              103.34424100000001,
              29.5992
          ],
          [
              103.34434299999998,
              29.599163
          ],
          [
              103.344493,
              29.599088
          ],
          [
              103.34492799999998,
              29.598793
          ],
          [
              103.34529800000001,
              29.59839
          ],
          [
              103.34544299999999,
              29.598197
          ],
          [
              103.34560399999998,
              29.597902
          ],
          [
              103.34565800000001,
              29.597741
          ],
          [
              103.34579200000002,
              29.597205
          ],
          [
              103.34580800000003,
              29.597167
          ],
          [
              103.345845,
              29.59706
          ],
          [
              103.345936,
              29.596856
          ],
          [
              103.34599600000001,
              29.596776
          ],
          [
              103.34612400000003,
              29.596679
          ],
          [
              103.34626400000002,
              29.596626
          ],
          [
              103.346473,
              29.596566
          ],
          [
              103.34725100000003,
              29.596427
          ],
          [
              103.34789999999998,
              29.596309
          ],
          [
              103.34812,
              29.596255
          ],
          [
              103.34851100000003,
              29.596095
          ],
          [
              103.34889800000002,
              29.595875
          ],
          [
              103.34929499999998,
              29.595574
          ],
          [
              103.34974499999998,
              29.595317
          ],
          [
              103.34982000000002,
              29.595231
          ],
          [
              103.349831,
              29.59514
          ],
          [
              103.34979900000002,
              29.595059
          ],
          [
              103.34948800000001,
              29.594662
          ],
          [
              103.34942899999999,
              29.594544
          ],
          [
              103.34939099999997,
              29.594415
          ],
          [
              103.34937000000002,
              29.594255
          ],
          [
              103.34937000000002,
              29.594126
          ],
          [
              103.34944999999999,
              29.593707
          ],
          [
              103.34961599999997,
              29.593385
          ],
          [
              103.34961599999997,
              29.593385
          ],
          [
              103.34969699999999,
              29.5933
          ],
          [
              103.34982600000001,
              29.593235
          ],
          [
              103.34992799999998,
              29.593214
          ],
          [
              103.350255,
              29.593181
          ],
          [
              103.35061400000001,
              29.593128
          ],
          [
              103.35094100000003,
              29.593053
          ],
          [
              103.35139800000002,
              29.592924
          ],
          [
              103.351564,
              29.59286
          ],
          [
              103.351875,
              29.592688
          ],
          [
              103.35201999999998,
              29.592645
          ],
          [
              103.35216500000001,
              29.592624
          ],
          [
              103.35234700000001,
              29.592618
          ],
          [
              103.352867,
              29.592645
          ],
          [
              103.35323800000003,
              29.592608
          ],
          [
              103.35335600000002,
              29.592613
          ],
          [
              103.3535,
              29.592645
          ],
          [
              103.35396200000002,
              29.592817
          ],
          [
              103.354241,
              29.592897
          ],
          [
              103.354938,
              29.593021
          ],
          [
              103.355233,
              29.593139
          ],
          [
              103.35544800000002,
              29.593262
          ],
          [
              103.35560299999997,
              29.593364
          ],
          [
              103.35570000000001,
              29.593455
          ],
          [
              103.35579100000001,
              29.593568
          ],
          [
              103.355839,
              29.593659
          ],
          [
              103.35593599999999,
              29.593895
          ],
          [
              103.35596800000002,
              29.593943
          ],
          [
              103.35604799999999,
              29.594002
          ],
          [
              103.35615000000001,
              29.594035
          ],
          [
              103.35628500000001,
              29.594029
          ],
          [
              103.35677299999998,
              29.593868
          ],
          [
              103.35689100000002,
              29.593809
          ],
          [
              103.35716400000001,
              29.593638
          ],
          [
              103.35726599999998,
              29.593595
          ],
          [
              103.357373,
              29.593573
          ],
          [
              103.357663,
              29.593557
          ],
          [
              103.35780799999998,
              29.593563
          ],
          [
              103.35820000000001,
              29.593632
          ],
          [
              103.35848399999998,
              29.593696
          ],
          [
              103.359375,
              29.593976
          ],
          [
              103.35988399999997,
              29.594126
          ],
          [
              103.35999700000002,
              29.59412
          ],
          [
              103.36005,
              29.594099
          ],
          [
              103.36029200000002,
              29.593922
          ],
          [
              103.36039900000003,
              29.593879
          ],
          [
              103.36051199999997,
              29.593847
          ],
          [
              103.360656,
              29.593841
          ],
          [
              103.36091899999997,
              29.593879
          ],
          [
              103.36105299999997,
              29.593927
          ],
          [
              103.36118799999997,
              29.593997
          ],
          [
              103.36179400000003,
              29.594426
          ],
          [
              103.36183699999998,
              29.594491
          ],
          [
              103.36185799999998,
              29.594587
          ],
          [
              103.36183699999998,
              29.594968
          ],
          [
              103.361874,
              29.595515
          ],
          [
              103.36190099999999,
              29.596288
          ],
          [
              103.361939,
              29.596486
          ],
          [
              103.36210499999999,
              29.597098
          ],
          [
              103.36211600000001,
              29.597167
          ],
          [
              103.36220100000003,
              29.597629
          ],
          [
              103.36227600000001,
              29.597988
          ],
          [
              103.36235199999999,
              29.598053
          ],
          [
              103.362529,
              29.598101
          ],
          [
              103.36355900000001,
              29.598197
          ],
          [
              103.36400400000002,
              29.598246
          ],
          [
              103.36425099999997,
              29.598305
          ],
          [
              103.36519499999997,
              29.598573
          ],
          [
              103.365501,
              29.598637
          ],
          [
              103.365613,
              29.598675
          ],
          [
              103.365613,
              29.598675
          ],
          [
              103.36586499999999,
              29.598659
          ],
          [
              103.36604999999997,
              29.598556
          ]
      ]
  },
  {
      name:'零公里',
      area:'零公里至龙洞养生园路段'
  },
  {
      name:'零公里',
      area:'零公里至龙洞养生园路段'
  },
  {
      name:'零公里',
      area:'零公里至龙洞养生园路段'
  },
  {
      name:'零公里',
      area:'零公里至龙洞养生园路段'
  },
  {
      name:'零公里',
      area:'零公里至龙洞养生园路段'
  },
  {
      name:'零公里',
      area:'零公里至龙洞养生园路段'
  },
  {
      name:'零公里',
      area:'零公里至龙洞养生园路段'
  },
  {
      name:'零公里',
      area:'零公里至龙洞养生园路段'
  },
]
const PopModal = (props) => {
    const {isModalOpen,setIsModalOpen,coordinate,tableMockData} = props
    const [mapState,setMap] = useState()
    let test = '2022/09/11 00:00:00'
    let initLineMockData = []
    for(let i=0;i<80;i++){
      let time = Date.parse(test)+600000*i
      let value 
      if(i<70){
        value = 0 + Math.random().toFixed(2)
      }else{
       value = (Math.random()*10).toFixed(2)
      }
      let arr = [time,value ]
      initLineMockData.push(arr)
    }
    const [lineMockData,setLineMockData] = useState(initLineMockData)
    // const [isModalOpen, setIsModalOpen] = useState(false);
    useEffect(()=>{
      if(isModalOpen){
        getMap()
      }else{
        return
      }
    },[isModalOpen])
  
    const getMap = () => {
      AMapLoader.load({
        key:"20f82c7a86e45f5da26e815931a775d0",                     // 申请好的Web端开发者Key，首次调用 load 时必填
        version:"2.0",              // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins:['AMap.DistrictSearch'],   
    }).then((AMap)=>{
        setTimeout(() => {
          let dom = document.querySelector('.PopRightMap')
          console.log(dom);
          if(dom){
              let map = new AMap.Map("PopRightMap",{ //设置地图容器id
              viewMode:"3D",         //是否为3D地图模式
              zoom:8,                //初始化地图级别
              center:coordinate, //初始化地图中心点位置
              mapStyle: "amap://styles/blue",
            })
            setMap(map)
            let trafficLayer = new AMap.TileLayer.Traffic({
              zIndex: 10,
              zooms: [7, 22],
            });
            trafficLayer.setMap(map); 
          }
        }, 0); 
    }).catch(e=>{
        console.log(e);
    })
  } 
    const showModal = () => {
        setIsModalOpen(true);
      };
    
      const handleOk = () => {
        setIsModalOpen(false);
      };
    
      const handleCancel = () => {
        setIsModalOpen(false);
      };
    const TabClickHandler = (e) => {
      const tabDoms = document.querySelectorAll('.PopTab-item')
      tabDoms.forEach((item,index)=>{
        item.classList.remove('PopTab-item-click')
      })
      e.target.classList.add('PopTab-item-click')
    }
    return(
    <>
      <Modal 
        centered={true} 
        open={isModalOpen} 
        footer={''} 
        onCancel={handleCancel}
        closeIcon={<RollbackOutlined 
        style={{ fontSize: '16px', color: '#08c' }}/>}
        width={'70vw'}
        bodyStyle={{
          padding:'5px',
          border:'2px solid #06c'
        }}
        // destroyOnClose={true}
        >
          <div className="Modal-Main">
            <div className="PopTab" onClick={(e)=> TabClickHandler(e)}>
              <div className="PopTab-item PopTab-item-click" >全部道路</div>
              <div className="PopTab-item" >高速道路</div>
              <div className="PopTab-item">普通道路</div>
              <div className="PopTab-item">常发拥堵道路</div>
            </div>
            <div className="PopContent">
              <div className="PopTable">
                <PopTable 
                map={mapState}
                setLineMockData={setLineMockData}
                tableMockData={tableMockData}
                ></PopTable>
              </div>

              <div className="PopRight">
                <div className="PopRightMap" id="PopRightMap">

                </div>
                <div className="PopRightLine">
                  <PopRightLine 
                    lineMockData={lineMockData}
                    tableMockData={tableMockData}>
                  </PopRightLine>
                </div>
              </div>
            </div>
          </div>
      </Modal>
    </>
    )
}
export default PopModal 